<template>
  <div class="home">
    <el-container>
      <el-header>
        <img @click="toindex" src="../assets/image/logo@2x.png" alt="" class="crmlogo" />
        <!-- <div class="tag" v-show="tags.length !== 0"> -->
        <!-- <div :class="{ tagitem: true, tagactive: tagsflag === index }" @click="totagpath(ele.path, index)"
            v-for="(ele, index) in tags" :key="index">
            {{ ele.name
            }}<el-icon @click.stop="handleClose(index)" class="icon">
              <Close />
            </el-icon>
          </div> -->
        <navView />
        <!-- <el-scrollbar>
          <div class="scrollbar-flex-content">
            <div :class="{ tagitem: true, tagactive: tagsflag === index }" @click="totagpath(ele.path, index)"
              v-for="(ele, index) in tags" :key="index">
              {{ ele.name
              }}<el-icon @click.stop="handleClose(index)" class="icon">
                <Close />
              </el-icon>
            </div>
          </div>
        </el-scrollbar> -->
        <!-- </div> -->
        <div class="adminmsg">
          <img src="../assets/image/bell.png" alt="">
          <el-popover placement="bottom" title="" :width="200" trigger="click" content="">
            <div>
              <ul>
                <!-- <li class="header_msg" @click="tomsg">个人信息</li> -->
                <li class="header_msg" @click="exit">退出登录</li>
              </ul>
            </div>
            <template #reference>
              <div class="flex items-center pointer">
                <el-avatar size="small" crossorigin="anonymous" :src="img" />
                <span style="font-size: 14px;margin-left: 20px;">{{ name }}</span>
                <img src="../assets/image/icon_arrow.png" alt="">
              </div>
            </template>
          </el-popover>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <sideBar />
          <!-- <el-menu active-text-color="#0357ff" class="el-menu-vertical-demo" router :unique-opened="true"
            :collapse-transition="true" :default-active="curRouter?.path">
            <template v-for="(ele, index) in menulist" :key="index">
              <el-menu-item v-if="!ele.children?.length" :index="ele.path"
                @click="cgangel_tab(ele.meta.title, ele.path, ele)">
                <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title + '-active')"
                  style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                  v-show="ele.meta.title === activeMenu" />
                <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title)" style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                  v-show="ele.meta.title !== activeMenu" />
                <span>{{ ele.meta.title }}</span>
              </el-menu-item>
              <el-sub-menu v-else :class="{ submenuactive: submenuflag === index }" @click="changesubmenu(index)"
                :index="ele.meta.title">
                <template #title>
                  <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title + '-active')"
                    style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                    v-show="ele.meta.title === activeMenu" />
                  <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title)" style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                    v-show="ele.meta.title !== activeMenu" />
                  <span>{{ ele.meta.title }}</span>
                </template>
                <el-menu-item v-for="(item, i) in ele.children" :key="i" v-if="ele.children"
                  :class="{ active: tabflag === item.meta.title }"
                  @click="cgangel_tab(item.meta.title, '/' + item.path, ele)" :index="item.path"> {{ item.meta.title
                  }}</el-menu-item>
                <el-sub-menu :index="item.meta.title" v-else v-for="(item, i) in ele.children">
                  <template #title>{{ item.meta.title }}</template>
                  <el-menu-item :index="j.path" v-for="(j, k) in item.children">{{ j.meta.title }}</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
            </template>
          </el-menu> -->
        </el-aside>
        <el-main>
          <!-- <transition name="router_animate">
            <router-view></router-view>
          </transition> -->
          <!-- <router-view v-slot="{ Component }">
            <transition name="router_animate">
              <keep-alive >
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view> -->
          <mainApp />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onActivated } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { getrouter, getuserinfoapi } from '../api/api'
import { wait } from '../utils/utils'
import { useStore } from '../store/index'
import { useRouterStore } from '../store/routerInfo/index'
import navView from '@/components/layout/navView.vue'
import sideBar from '@/components/layout/sideBar.vue'
import mainApp from '@/components/layout/mainApp.vue'

const store = useStore()
const routerStore = useRouterStore()
// 自定义指令
// const vFocus = {
//   // 在绑定元素的 attribute 前
//   // 或事件监听器应用前调用
//   created(el: any, binding: any) {
//     console.log(111);
//     console.log(el);
//     console.log(binding);
//   },
//   // 在元素被插入到 DOM 前调用
//   beforeMount() {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都挂载完成后调用
//   mounted() {},
//   // 绑定元素的父组件更新前调用
//   beforeUpdate() {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都更新后调用
//   updated() {},
//   // 绑定元素的父组件卸载前调用
//   beforeUnmount() {},
//   // 绑定元素的父组件卸载后调用
//   unmounted() {},
// };

const activeMenu = ref('')

const submenuflag = ref(1)
const changesubmenu = (i: number) => {
  submenuflag.value = i
}
const router = useRouter()
const route = useRoute()
const curRouter = ref({})

// 点击logo去首页
const toindex = () => {
  router.push({ path: '/' })
}
// 声明左侧菜单栏数据
const menulist = ref<any>([])
// 进入页面就加在左侧菜单栏
onMounted(() => {
  // getrouter().then((res) => {
  //   // if (res?.length) {
  //   //   res.forEach(i => {
  //   //     if (i.children) {
  //   //       i.children.forEach(route => {
  //   //         route.component = route.path
  //   //       })
  //   //     }
  //   //     router.addRoute(i.path, i)
  //   //   })
  //   // }
    

  //   // console.log(212121, router);
  //   menulist.value = res;
  //   // routerStore.addRouterInfo(res)
    
  //   // menulist.value.unshift({
  //   //   name: "Dashboard",
  //   //   path: "dashboard",
  //   //   hidden: false,
  //   //   redirect: "noRedirect",
  //   //   component: "Layout",
  //   //   alwaysShow: true,
  //   //   meta: {
  //   //     title: "数据表盘",
  //   //     icon: "#",
  //   //     noCache: false,
  //   //     remark: "数据表盘"
  //   //   },
  //   //   children: [
  //   //     {
  //   //       name: "DashboardSassPay",
  //   //       path: "dashboardSassPay",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "子弹发薪",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "子弹发薪"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardPeriodInsure",
  //   //       path: "dashboardPeriodInsure",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "长期保",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "长期保"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardWeInsure",
  //   //       path: "dashboardWeInsure",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "日日保",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "日日保"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardGroupInsure",
  //   //       path: "dashboardGroupInsure",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "团意保",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "团意保"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardEleSign",
  //   //       path: "dashboardEleSign",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "电子签",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "电子签"
  //   //       },
  //   //     },
  //   //   ]
  //   // })


  //   // menulist.value.unshift({
  //   //   name: "index",
  //   //   path: "/",
  //   //   hidden: false,
  //   //   redirect: "noRedirect",
  //   //   component: "Layout",
  //   //   alwaysShow: true,
  //   //   meta: {
  //   //     title: "首页",
  //   //     icon: "#",
  //   //     noCache: false,
  //   //     remark: "首页"
  //   //   },
  //   // })

  //   // menulist.value.push({
  //   //   name: "Team",
  //   //   path: "team",
  //   //   hidden: false,
  //   //   redirect: "noRedirect",
  //   //   component: "Layout",
  //   //   alwaysShow: true,
  //   //   meta: {
  //   //     title: "团队",
  //   //     icon: "#",
  //   //     noCache: false,
  //   //     remark: "数据表盘"
  //   //   },
  //   //   children: [
  //   //     {
  //   //       name: "TeamTarget",
  //   //       path: "teamtarget",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "目标",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "目标"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "Rankinglist",
  //   //       path: "rankinglist",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "排名",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "排名"
  //   //       },
  //   //     },
  //   //   ]
  //   // })

  //   // const currentRoute = menulist.value.find((i: any) => {
  //   //   if (i.children && i.children.length) {
  //   //     const cur = i.children.find((j: any) => {
  //   //       return ('/' + j.path) === route.path
  //   //     })
  //   //     if (cur) {
  //   //       curRouter.value = cur
  //   //       return i
  //   //     }
  //   //   }
  //   // })

  //   // if (currentRoute) {
  //   //   activeMenu.value = currentRoute.meta.title
  //   // }
  //   setCurRouter(route)
  // });
  getuserinfoapi().then((res: any) => {
    img.value = res.user.avatar
    name.value = res.user.nickName
    store.setButtonPremission(res.permissions)
    sessionStorage.setItem('userid', res.user.userId)
    sessionStorage.setItem('img', res.user.avatar)
    sessionStorage.setItem('name', res.user.nickName)
    sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
    sessionStorage.setItem('isSupPcAdmin', res.user.isSupPcAdmin)
    sessionStorage.setItem('deptId', res.user.deptId)
  })
})
onActivated(() => {
  // getrouter().then((res) => {
  //   // if (res?.length) {
  //   //   res.forEach(i => {
  //   //     if (i.children) {
  //   //       i.children.forEach(route => {
  //   //         route.component = route.path
  //   //       })
  //   //     }
  //   //     router.addRoute(i.path, i)
  //   //   })
  //   // }
    

  //   // console.log(212121, router);
  //   menulist.value = res;
  //   // routerStore.addRouterInfo(res)
    
  //   // menulist.value.unshift({
  //   //   name: "Dashboard",
  //   //   path: "dashboard",
  //   //   hidden: false,
  //   //   redirect: "noRedirect",
  //   //   component: "Layout",
  //   //   alwaysShow: true,
  //   //   meta: {
  //   //     title: "数据表盘",
  //   //     icon: "#",
  //   //     noCache: false,
  //   //     remark: "数据表盘"
  //   //   },
  //   //   children: [
  //   //     {
  //   //       name: "DashboardSassPay",
  //   //       path: "dashboardSassPay",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "子弹发薪",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "子弹发薪"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardPeriodInsure",
  //   //       path: "dashboardPeriodInsure",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "长期保",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "长期保"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardWeInsure",
  //   //       path: "dashboardWeInsure",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "日日保",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "日日保"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardGroupInsure",
  //   //       path: "dashboardGroupInsure",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "团意保",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "团意保"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "DashboardEleSign",
  //   //       path: "dashboardEleSign",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "电子签",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "电子签"
  //   //       },
  //   //     },
  //   //   ]
  //   // })


  //   // menulist.value.unshift({
  //   //   name: "index",
  //   //   path: "/",
  //   //   hidden: false,
  //   //   redirect: "noRedirect",
  //   //   component: "Layout",
  //   //   alwaysShow: true,
  //   //   meta: {
  //   //     title: "首页",
  //   //     icon: "#",
  //   //     noCache: false,
  //   //     remark: "首页"
  //   //   },
  //   // })

  //   // menulist.value.push({
  //   //   name: "Team",
  //   //   path: "team",
  //   //   hidden: false,
  //   //   redirect: "noRedirect",
  //   //   component: "Layout",
  //   //   alwaysShow: true,
  //   //   meta: {
  //   //     title: "团队",
  //   //     icon: "#",
  //   //     noCache: false,
  //   //     remark: "数据表盘"
  //   //   },
  //   //   children: [
  //   //     {
  //   //       name: "TeamTarget",
  //   //       path: "teamtarget",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "目标",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "目标"
  //   //       },
  //   //     },
  //   //     {
  //   //       name: "Rankinglist",
  //   //       path: "rankinglist",
  //   //       hidden: false,
  //   //       redirect: "noRedirect",
  //   //       component: "Layout",
  //   //       alwaysShow: true,
  //   //       meta: {
  //   //         title: "排名",
  //   //         icon: "#",
  //   //         noCache: false,
  //   //         remark: "排名"
  //   //       },
  //   //     },
  //   //   ]
  //   // })

  //   // const currentRoute = menulist.value.find((i: any) => {
  //   //   if (i.children && i.children.length) {
  //   //     const cur = i.children.find((j: any) => {
  //   //       return ('/' + j.path) === route.path
  //   //     })
  //   //     if (cur) {
  //   //       curRouter.value = cur
  //   //       return i
  //   //     }
  //   //   }
  //   // })

  //   // if (currentRoute) {
  //   //   activeMenu.value = currentRoute.meta.title
  //   // }
  //   setCurRouter(route)
  // });
  getuserinfoapi().then((res: any) => {
    img.value = res.user.avatar
    name.value = res.user.nickName
    store.setButtonPremission(res.permissions)
    sessionStorage.setItem('userid', res.user.userId)
    sessionStorage.setItem('img', res.user.avatar)
    sessionStorage.setItem('name', res.user.nickName)
    sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
    sessionStorage.setItem('isSupPcAdmin', res.user.isSupPcAdmin)
    sessionStorage.setItem('deptId', res.user.deptId)
  })
})
const setCurRouter = (curRoute: any) => {
  const currentRoute = menulist.value.find((i: any) => {
    if (i.children && i.children.length) {
      const cur = i.children.find((j: any) => {
        return ('/' + j.path) === curRoute.path
      })
      if (cur) {
        curRouter.value = cur
        return i
      }
    }
  })

  if (currentRoute) {
    activeMenu.value = currentRoute.meta.title
  }
}

const img = ref<any>('')
const name = ref<any>('')
// 关闭tag标签
const handleClose = (i: number) => {
  tags.value.splice(i, 1)
  if (tags.value.length != 0) {
    router.push({ path: tags.value[tags.value.length - 1].path })
    tagsflag.value = tags.value.length - 1
  } else {
    return
  }
}
const tags = ref<any[]>([])
// 退出登录
const exit = () => {
  console.log('退出登录并跳转登录页面')
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('userid')
//   localStorage.clear()
  router.push({ path: '/login' })
}
// 跳转到个人信息页面
const tomsg = () => {
  router.push('/personalmsg')
}
const tabflag = ref('')
const iconflag1 = ref(false)
const iconflag2 = ref(false)
const iconflag3 = ref(false)
const iconflag4 = ref(false)
const iconflag5 = ref(false)
// menu菜单切换，动态添加类名，并且添加tag标签
const cgangel_tab = (val: string, path: string, ele: any) => {
  // console.log(2121, val, path, ele);
  activeMenu.value = ele.meta.title
  // console.log(1111, ele);
  if (val === '员工工资单' || val === '保司对账') {
    iconflag1.value = true
    iconflag2.value = false
    iconflag3.value = false
    iconflag4.value = false
    iconflag5.value = false
  } else if (val === '客户管理' || val === '充值/续费管理') {
    iconflag1.value = false
    iconflag2.value = true
    iconflag3.value = false
    iconflag4.value = false
    iconflag5.value = false
  } else if (val === '人员设置') {
    iconflag1.value = false
    iconflag2.value = false
    iconflag3.value = true
    iconflag4.value = false
    iconflag5.value = false
  }
  else if (val === '保险数据看板' || val === '理赔率看板' || val === '黑名单' || val === '收款账户') {
    iconflag1.value = false
    iconflag2.value = false
    iconflag3.value = false
    iconflag4.value = true
    iconflag5.value = false
  }
  else if (val === '长期保设置' || val === '日保设置') {
    iconflag1.value = false
    iconflag2.value = false
    iconflag3.value = false
    iconflag4.value = false
    iconflag5.value = true
  }
  tabflag.value = val
  var flag = tags.value.findIndex((ele, index) => {
    return ele.name === val
  })
  if (flag === -1) {
    tags.value.push({ name: val, path: path })
    tagsflag.value = tags.value.length - 1
  } else {
    tagsflag.value = flag
  }
}
const tagsflag = ref(0)
// 点击头部tag标签跳转对应页面
const totagpath = (path: string, i: number) => {
  tagsflag.value = i
  router.push(path)
}

const handleClick = () => {
  console.log(1111)
}

const getAssetUrl = (imgName: string) => {
  return new URL(`../assets/image/menu/${imgName}.png`, import.meta.url).href
}

onBeforeRouteUpdate((to, from) => {
  setCurRouter(to)
})

</script>

<style lang="scss" scoped>
.header_msg {
  margin: 20px 0 20px 0;
  cursor: pointer;
}

.header_msg:hover {
  color: rgba(62, 95, 245, 1);
}

.header_icon:hover {
  cursor: pointer;
}

.submenuactive {
  background-color: #f6f8ff;
}

.el-header {
  background-color: rgba(255, 255, 255, 1);
  color: #333;
  width: 100vw;
  height: 5vh;
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    margin-left: 10px;
    height: 80%;
  }

  .tag {
    height: 32px;
    flex: 1;
    padding-left: 40px;
    display: flex;
    overflow-x: scroll;

    .tagitem {
      height: 100%;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 14px;
      min-width: 130px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: start;
      color: #9497b1;
      padding: 8px 10px;
      border-radius: 4px;
      border: 1px solid #ffffff;

      .icon {
        margin-left: 10px;
      }

      .icon:hover {
        background-color: #dcdcdd;
        border-radius: 50%;
      }

      .icon:active {
        background-color: #c6c6ca;
        border-radius: 50%;
      }
    }

    .tagitem:hover {
      background-color: #fafafc;
      border: 1px solid #9eaffa;
    }
  }

  .adminmsg {
    flex-shrink: 0;
    margin-left: 20px;
    width: 150px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.tagitem {
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  min-width: 130px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9497b1;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ffffff;

  .icon {
    margin-left: 10px;
  }

  .icon:hover {
    background-color: #dcdcdd;
    border-radius: 50%;
  }

  .icon:active {
    background-color: #c6c6ca;
    border-radius: 50%;
  }
}

.tagitem:hover {
  background-color: #fafafc;
  border: 1px solid #9eaffa;
}

.tagactive {
  background-color: #ebeffe;
  color: #0256ff !important;
}

.el-aside {
  padding-top: 40px;
  background-color: rgba(255, 255, 255, 1);
  color: #333;
  width: 10vw;
  min-width: 200px;
  height: 95vh;
}

.el-main {
  background-color: rgba(244, 244, 247, 1);
  width: 90vw;
  height: 95vh;
  padding: 0px !important;
  overflow-y: scroll;
}

.el-sub-menu .el-menu-item {
  margin-left: 30px;
  border-left: 2px solid rgba(234, 234, 239, 1);
  // background-color: red;
}

.active {
  border-left: 2px solid rgba(158, 175, 250, 1);
}

.crmlogo {
  cursor: pointer;
  margin-top: 10px;
  margin-right: 80px;
  width: 91px;
  height: 20px !important;
}

.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
:deep(.el-table td.el-table__cell) {
  border: none;
}
</style>
